<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" class="app">
			<div class="test">
				<div class="child">子元素div</div>
			</div>
			<div class="adjacent">相邻div</div>
			<div class="test">同级div</div>
			<div>同级div</div>
			<div>同级div</div>
		</div>
	</body>

	<style>
	.app>div{
		width: 100px;
		height: 100px;
		margin: 5px;
		border: 1px solid black;
	}
	.child{
		width: 50px;
		height: 50px;
		margin: 25px;
		border: 1px solid red;
	}
	
	.app>div:first-child:hover{
		/* hover改变自己颜色 */
		background-color: green;
	}
	.app>div:first-child:hover div{
		/* hover改变child颜色 */
		background-color: pink;
	}
	
	.app>div:first-child:hover+.adjacent{
		/* hover改变后面相邻姐妹颜色 */
		background-color: deepskyblue;
	}
	.app>div:first-child:hover~div{
		/* hover改变后面同级姐妹颜色 */
		background-color: red;
	}
	</style>
</html>
